export default class {
    constructor ($container, options={}) {
        this._options = {
            box: '.box',
            left: '.left',
            right: '.right',
            threshold: 20,
        }

        for (let key in options) {
            this._options[key] = options[key];
        }

        this.$box = $container.querySelector(this._options.box);
        this.$left = this.$box.querySelector(this._options.left);
        this.$right = this.$box.querySelector(this._options.right);

        this._width = this.$box.offsetWidth;
        this._offset = 0;

        this._distance = this.$right.offsetWidth;
        this._display_right = false;

        this._start = {};
        this._move = {};
        this._end = {};

        this._init();
        this._bind_touch();
    }

    toggle(display) {
        this._display_right = display;

        this._show();
    }

    _init() {
        // this.$left.style.width = this._width + 'px';
        this.$right.style.height = this.$left.offsetHeight + 'px';
        this.$box.style.width = this._width + this._distance + 'px';
    }

    _bind_touch() {
        const touchstartHandler = (e) => {
            this._start.x = e.changedTouches[0].pageX;
            this._start.y = e.changedTouches[0].pageY;

            this.$box.style.transition = 'none';
        }

        const touchmoveHandler = (e) => {
            this._move.x = e.changedTouches[0].pageX;
            this._move.y = e.changedTouches[0].pageY;

            const x_distance = this._move.x - this._start.x;
            const y_distance = this._move.y - this._start.y;

            if (Math.abs(x_distance) > Math.abs(y_distance)) {
                this.$box.style.transform = `translate3d(${x_distance / 4 - this._offset}px, 0, 0)`;
                e.preventDefault();
            }

        }

        const touchendHandler = (e) => {
            this._end.x = e.changedTouches[0].pageX;
            this._end.y = e.changedTouches[0].pageY;

            const x_distance = this._end.x - this._start.x;
            const y_distance = this._end.y - this._start.y;

            this._start = {}
            this._move = {}
            this._end = {}

            if (Math.abs(x_distance) > Math.abs(y_distance)) {
                if (Math.abs(x_distance) > this._options.threshold) {
                    this._display_right = x_distance < 0;
                }

                this._show();
            }
        }

        const transitionEndHandler = (e) => {
            if (e.target !== this.$box) {
                return false;
            }

            e.preventDefault();
        }

        this.$box.addEventListener('touchstart', touchstartHandler, false);
        this.$box.addEventListener('touchmove', touchmoveHandler, false);
        this.$box.addEventListener('touchend', touchendHandler, false);
        this.$box.addEventListener('transitionend', transitionEndHandler, false);
    }

    _show () {
        this._offset = this._display_right? this._distance : 0;

        this.$box.style.transform = `translate3d(${-this._offset}px, 0, 0)`;
        this.$box.style.transition = '300ms'
    }
}
